import React, { useReducer, useState } from 'react';
import Button , { buttonType , buttonSize} from './components/Button/button';
import Alert ,{alertSize , alertType} from './components/Alert/alert';
import AutoComplete , { DataSourceType } from './components/AutoComplete/autoComplete';
import Menu  from './components/Menu/menu';
import MenuItem from './components/Menu/menuItem';
import SubMenu from './components/Menu/subMenu';
import Transition from './components/Transition';
import Tabs from './components/Tabs/tabs';
import TabItem from './components/Tabs/tabItem';


function App() {

  const [show , doShow] = useState(false);

  let [ a,dos]= useReducer((x)=>x+10, 0);

  interface Rprops extends DataSourceType{
    name?:string
  }


  const renderH1 = (item:Rprops)=>{
    return(<h4>
      Name: {item.value}
    </h4>)
  };


  const lala= ()=>{
    return ""
  }


  return (
    <div className="App">
      <Button btnType={buttonType.Danger} onClick={()=>{dos(); console.log(a);doShow(!show);}}>asdfsa</Button>
      <Alert type={alertType.Warning} title='shit' text='heheh'>asdfsa</Alert>
      <AutoComplete fetchSuggestions={(value:string)=>{
        console.log("输入的数据",value);
        return [{value:"第一个数据"},{value:"第二个数据"}]
      }}
      
        renderOption={(v)=>{
          return <Button>{v.value}</Button>
        }}
      
        
      ></AutoComplete>


      <Menu  onSelect={(v)=>{ console.log(v); }} mode="horizontal">

        <MenuItem>bbbb</MenuItem>
        <MenuItem>asdfsa</MenuItem>
      </Menu>

      <br/>

      

    </div>
  );
}

export default App;
